<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>

<script id="vertexShader" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    uniform mat4 u_PvM4;
    uniform mat4 u_ModelM4;
    void main(){
        //gl_Position = u_PvM4 * a_Position;
        gl_Position = u_PvM4 * u_ModelM4 * a_Position;
    }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
    precision mediump float;
    uniform vec4 u_Color;
    void main(){
      gl_FragColor = u_Color;
    }
</script>
<script type="module">
    import { Matrix4, Vector3, Color, PerspectiveCamera } from '../js/three.module.js';
    import Poly from '../js/Poly3.js';
    import { initShaders } from '../js/Utils.js';
    import lib from '../js/ThreeLib.js';



    const canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight - 4;

    const gl = canvas.getContext("webgl");


    //开始背景遮挡
    // gl.enable(gl.DEPTH_TEST);
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

    initShaders(gl,
        document.querySelector("#vertexShader").innerText,
        document.querySelector("#fragmentShader").innerText);
    lib.clearCanvas(gl, new Color("rgba(0,0,0,1)"), 1);


    const [fov, aspect, near, far] = [
        45, //摄像机的开角度数???
        canvas.width / canvas.height,   //投影的宽高比
        1,  //投影窗口的最小z值
        20  //投影窗口的最大z值
    ];

    //透视相机对象
    const camera = new PerspectiveCamera(fov, aspect, near, far);

    let eyeZ = 3;
    let [eyeZMin, eyeZMax] = [0.1, 16];
    let eye = new Vector3(0, 0, eyeZ);
    let lookAtZ = 0;
    let lookAt = new Vector3(0, 0, lookAtZ);





    let z1 = -3;
    let poly1 = create(
        [1, 0, 0, 1],
        new Matrix4().setPosition(-0.5, 0, z1)
    );
    let poly2 = create(
        [1, 0, 0, 1],
        new Matrix4().setPosition(0.5, 0, z1)
    );

    let z2 = -2;
    let poly3 = create(
        [1, 1, 0, 1],
        new Matrix4().setPosition(-0.5, 0, z2)
    );
    let poly4 = create(
        [1, 1, 0, 1],
        new Matrix4().setPosition(0.5, 0, z2)
    );

    setPvM4(eye, lookAt);
    rend();


    //望远镜的效果
    canvas.addEventListener("wheel", function (event) {
        const { deltaY } = event;
        if (deltaY == -100) {
            //放大
            eyeZ -= 0.1;
        } else {
            // 缩小
            eyeZ += 0.1;
        }
        if (eyeZ <= eyeZMin)
            eyeZ = eyeZMin;
        if (eyeZ >= eyeZMax)
            eyeZ = eyeZMax;
        console.log(eyeZ)
        eye = new Vector3(eye.x, eye.y, eyeZ);


        // if (deltaY == -100) {
        //     //放大
        //     lookAtZ -= 0.1;
        // } else {
        //     // 缩小
        //     lookAtZ += 0.1;
        // }
        // if (lookAtZ <= -10)
        //     lookAtZ = -10;
        // if (lookAtZ >= 0)
        //     lookAtZ = 0;
        // lookAt = new Vector3(lookAt.x, lookAt.y, lookAtZ);
        // console.log(lookAtZ)
        setPvM4(eye, lookAt);
        rend();
    })
    canvas.addEventListener("mousemove", function (event) {
        let { clientX, clientY } = event;
        let cx = canvas.width / 2;
        let cy = canvas.height / 2;

        let c = 1;
        if (eyeZ < 1) {
            c = c * eyeZ;
        }
        let x = (clientX - cx) / cx * c;
        let y = (clientY - cy) / cy * c;

        eye = new Vector3(-x, y, eyeZ);
        //lookAt = new Vector3(x, -y, lookAtZ);

        // console.log(lookAt)

        setPvM4(eye, lookAt);
        rend();
    });



    function getPvM4(eye, lookAt) {
        camera.position.copy(eye);
        camera.lookAt(lookAt);
        camera.updateWorldMatrix(true);

        return new Matrix4().multiplyMatrices(
            camera.projectionMatrix,
            camera.matrixWorldInverse
        );
    }
    function setPvM4(eye, lookAt) {
        let pvM4 = getPvM4(eye, lookAt);
        poly1.uniforms['u_PvM4'].value = pvM4.elements;
        poly2.uniforms['u_PvM4'].value = pvM4.elements;
        poly3.uniforms['u_PvM4'].value = pvM4.elements;
        poly4.uniforms['u_PvM4'].value = pvM4.elements;
    }

    function rend() {
        lib.clearCanvas(gl, new Color("rgba(0,0,0,1)"), 1);
        poly1.init();
        poly1.draw(["TRIANGLES", "POINTS"]);
        poly2.init();
        poly2.draw(["TRIANGLES", "POINTS"]);
        poly3.init();
        poly3.draw(["TRIANGLES", "POINTS"]);
        poly4.init();
        poly4.draw(["TRIANGLES", "POINTS"]);
    }

    function create(color, modelM4) {
        // poly.draw(["TRIANGLES", "POINTS"]);
        return new Poly({
            gl: gl,
            arr: [
                0, 0.3, 0,
                0.3, -0.3, 0,
                -0.3, -0.3, 0
            ],
            list: [
                { name: 'a_Position', size: 3, beginIndex: 0 }
            ],
            uniforms: {
                'u_Color': {
                    type: 'uniform4fv',
                    value: color
                },
                'u_PvM4': {
                    type: 'uniformMatrix4fv',
                    value: getPvM4(eye, lookAt).elements
                },
                'u_ModelM4': {
                    type: 'uniformMatrix4fv',
                    value: modelM4.elements
                }
            }
        });;
    }

</script>

</html>